<template>
    <div style="height:100%;width:100%">
        <el-row class="mainContent order">
            <el-col :span="8" :offset="2" :xs="18" :sm="18" :md="10" :lg="8" :xl="8">
                <el-row>
                    <el-col :span="10" style="margin-bottom:10px;text-align:left">
                        {{operateDetali.name}}
                    </el-col>
                </el-row>
                <el-form :label-position="labelPosition" label-width="80px" :model="operateDetali" style="text-align:left;">
                    <el-form-item label="联系人">
                        <el-col :span="10" :xs="22" :sm="18" :md="18" :lg="18" :xl="10" style="margin-bottom:10px;">
                              {{operateDetali.name}}
                        </el-col>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-col :span="10" :xs="22" :sm="18" :md="14" :lg="12" :xl="10" style="margin-bottom:10px;">
                            {{operateDetali.tel}}
                        </el-col>
                    </el-form-item>
                </el-form>
                <el-row>
                    <el-col :span="12" class="text-lf">
                        乘车时间
                    </el-col>
                </el-row>

                <el-row :gutter="20" style="text-align:left;">
                    <el-col :span="8" :xs="13" :sm="13" :md="13" :xl="8">
                        <el-date-picker v-model="supplyTime" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="10" :xs="13" :sm="13" :md="13" :xl="10">
                        <el-input placeholder="请输入航班号" v-model="flight" clearable>
                        </el-input>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12" class="text-lf">
                        乘客信息
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="text-lf">
                    <el-col :span="8" :xs="13" :sm="13" :md="13" :xl="8">
                        <el-input placeholder="请输入联系人" v-model="fareName" clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="10" :xs="13" :sm="13" :md="13" :xl="10">
                        <el-input type="textarea" :rows="2" v-model="fareTel" autosize placeholder="乘客手机号码，多人请以逗号隔开">
                        </el-input>
                    </el-col>
                </el-row>
                <el-row class="text-lf">
                    <el-col :span="18">
                        <el-input type="textarea" :rows="4" v-model="description" autosize placeholder="请输入备注信息">
                        </el-input>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="10" :offset="1" :xs="18" :sm="18" :md="10" :lg="12" :xl="10">
                <el-row>
                    <el-col :span="18" class="text-lf">
                        出发地
                    </el-col>
                    <el-col style="text-align:left;">
                        <div class="block" style="margin-bottom:20px;">
                            <area-select :level='2' type='all' v-model='departure'></area-select>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <el-input placeholder="请输入详细出发地址" v-model='departureDetali' clearable>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18" class="text-lf">
                        目的地
                    </el-col>
                    <el-col class="text-lf">
                        <div class="block" style="margin-bottom:20px;">
                            <area-select :level='2' type='all' v-model='destination'></area-select>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <el-input placeholder="请输入详细目的地地址" v-model="destinationDetali" clearable>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <p>成人</p>
                        <el-input placeholder="请输入成人人数" v-model="adultNum" clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <p>儿童</p>
                        <el-input placeholder="请输入儿童人数" v-model="childNum" clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <p>总人数</p>
                        <div>{{conNum || 0}}人</div>
                    </el-col>
                    <el-col style="text-align:left;margin-top:20px;">
                        <el-form :inline="true" :model="invoice" class="demo-form-inline">
                            <el-form-item label="是否需要发票:">
                                <el-select v-model="invoice.region" placeholder="是否需要发票">
                                    <el-option label="需要" value="1"></el-option>
                                    <el-option label="不需要" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="24" style="text-align:left;">
                        <el-button type="primary" size='medium ' style="width:200px;height:60px;margin-top:40px;" @click="orderSubmit()">确认提交</el-button>
                    </el-col>

                </el-row>

            </el-col>

        </el-row>

    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            labelPosition: 'left',
            connection: {},
            departure: ['110000', '110100', '110101'],
            departureDetali: '',
            destination: ['110000', '110100', '110101'],
            destinationDetali: '',

            adultNum: null,
            childNum: null,


            supplyTime: '',//出发时间
            flight: '',//航班号


            fareName: '',
            fareTel: '',
            description: '',//备注
            invoice: {
                region: '1'
            },
            loading: false,
            operateDetali:JSON.parse(window.sessionStorage.getItem('operateDetali')),
        };
    },
    computed: {
       
        conNum() {
            return parseInt(this.adultNum || 0) + parseInt(this.childNum || 0)
        },
    },
    methods: {
        orderSubmit(fn) {

            let chufaKeys = [];
            let chufavals = [];
            let mudikeys = [];
            let mudiVals = [];

            for (var p in this.departure) {
                for (var i in this.departure[p]) {
                    chufaKeys.push(i);
                    chufavals.push(this.departure[p][i])
                }
            }

            for (var p in this.destination) {
                for (var i in this.destination[p]) {
                    mudikeys.push(i);
                    mudiVals.push(this.destination[p][i])
                }
            }

            var obj = {
                data: {
                    departure: chufavals.join('-') + '-' + this.departureDetali,
                    destination: mudiVals.join('-') + '-' + this.destinationDetali,
                    passengerNum: this.conNum,
                    dpTime: Date.parse(this.supplyTime),
                    trafficInfo: this.flight,
                    passengerName: this.fareName,
                    passengerTel: this.fareTel,
                    description: this.description,
                    invoice: this.invoice.region,
                }
            };
            if (this.conNum == '' || this.flight == '' || this.fareName == '' || this.fareTel == '' || this.description == '' || this.invoice.region == '') {
                this.$message({
                    message: '请认真填写',
                    type: "error"
                });
            } else {
                this.$http('/bport/useCar ', obj)
                    .then(resp => {
                        this.loading = false;
                        if (resp.code == 1) {
                            this.$message({
                                message: resp.msg,
                                type: "success"
                            });
                            window.sessionStorage.setItem("isShowPwd", false);
                            this.$router.push({path:'transOrder'})
                        } else {
                            this.$notify({
                                title: "错误",
                                message: resp.msg,
                                type: "error"
                            });
                        }
                    });
            }

        }

    }
}
</script>
<style>
div.area-select {
    height: 40px;
}

.area-select-wrap>div.area-select:first-child {
    margin-left: 0
}

.text-lf {
    text-align: left;
    margin-bottom: 10px;
}

.order input,
.order .area-select {
    margin-bottom: 10px;
}

.el-form-item {
    margin-bottom: 10px;
}
</style>
